<template>
    <div>
    <a-modal
        :destroyOnClose='true'
        :visible="detailBox"
        :title="type"
        okText='确认'
        cancelText="取消"
        @cancel="$emit('cancel')"
        :width="'700px'"
        @ok="submitQuestion()"
        >
        <div class="content">
            <div class="header" >
                <div  class="question stem">
                    <button>题干</button>
                    <a-textarea  class="details" autosize v-model="question.stem"/>
                </div>
                <div  class="question analysis">
                    <button>解析</button>
                    <a-textarea  class="details" :rows="4" v-model="question.analyse"/>
                </div>
            </div>
            <div v-if="type=='判断题'" class="answer" style="text-align:center">
                <a-row style="line-height:40px;margin-top:30px;">
                    <a-col :span="4"><a-tag>答案</a-tag></a-col>
                    <a-col :span="8">
                        <a-radio-group @change="chooseAnswer" :value="answer">
                            <a-radio value="正确">正确</a-radio>
                            <a-radio value="错误">错误</a-radio>
                        </a-radio-group>
                    </a-col>
                </a-row>
            </div>
            <div v-else class="answer" style="text-align:center">
                <a-row style="line-height:40px;margin-top:30px;">
                    <a-col :span="14"><a-tag>选项</a-tag></a-col>
                    <a-col :span="3"><a-tag>答案</a-tag></a-col>
                    <a-col :span="7"><a-tag>操作</a-tag></a-col>
                </a-row>
                <a-row v-for="(item,index) in answer" :key="index" type="flex" style="margin-bottom:10px;" justify="space-around" align="middle">
                    <a-col :span="14">
                        <div  class="question">
                            <button>{{optionList[index]}}</button>
                            <a-textarea  class="details" autosize v-model="item.itemDetails"/>
                        </div>
                    </a-col>
                    <a-col :span="3">
                        <a-radio v-if="type=='单选题'" :checked="item.isSelect" @change="selected(index)"></a-radio>
                        <a-checkbox v-else :checked="item.isSelect" @change="selectedMore(index)"></a-checkbox>
                    </a-col>
                    <a-col :span="7">
                        <a-button-group size="small">
                            <a-button @click="deleteOption(index)" type="primary" icon="minus"/>
                            <a-button :disabled="index==0" @click="up(index)" type="primary" icon="arrow-up" />
                            <a-button :disabled="answer.length==index+1" @click="down(index)" type="primary" icon="arrow-down" />
                        </a-button-group>
                    </a-col>
                </a-row>
                <a-button block @click="addOption"><a-icon type="plus" /></a-button>
            </div>
        </div>
    </a-modal>
    </div>
</template>
<script>
export default {
    name:'questionTypeModal',
    props:{
        detailBox:Boolean,
        question:Object,
        answer:[String,Array],
        type:String
    },
    data(){
        return{
            optionList:['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'],
            checked:false,
            correct:'',
        }
    },
    methods:{
        // 删除选项
        deleteOption(data){
            if(this.answer.length<4){
                this.$message.error('选项不能低于三个')
            }else{
                let arr=this.correct.split('')
                if(this.answer[data].isSelect){
                    arr.splice(arr.indexOf(this.optionList[data]),1)
                }
                this.correct=arr.join('')
                this.answer.splice(data,1)
            }
        //    
        },
        // 增加选项
        addOption(){
            if(this.answer.length<6){
                this.answer.push({'itemDetails':'','isSelect':false})  
            }else{
                this.$message.error('选项不能超过六个')
            }
        },
        // 是否选中
        selected(data){
            this.answer.forEach(element => {
                element.isSelect=false
            });
            this.answer[data].isSelect=true
            this.correct=this.optionList[data]
            this.$emit('selectAnswer',this.correct)
        },
        selectedMore(data){
            this.answer[data].isSelect=!this.answer[data].isSelect
            let string=""
            this.answer.forEach((item,index)=>{
                if(item.isSelect){
                    string+=this.optionList[index]
                }
            })
            this.correct=string
            this.$emit('selectAnswer',this.correct)
        },
        // 选项上移
        up(index){
            this.answer[index] = this.answer.splice(index-1, 1, this.answer[index])[0];
            
        },
        // 选项下移
        down(index){
            this.answer[index] = this.answer.splice(index+1, 1, this.answer[index])[0];
        },
        // 判断题
        chooseAnswer(data){
            this.$emit('selectAnswer',data.target.value)
        },
        // 确认添加题目
        submitQuestion(){
            // 转化类型
            let type=null
            switch(this.type){
                case '单选题' : type = 0
                break;
                case '多选题' : type = 1
                break;
                case '判断题' : type = 2
                break;
                case '实操题' : type = 3
                break;
            }
            if(this.isSubmit(type)){
                let options=''
                let lastAnswer=[]
                if(this.type!='判断题'){
                    this.answer.forEach((item,index)=>{
                        if(type==0){
                            if(item.isSelect){
                                lastAnswer.push(this.optionList[index])
                            }
                        }else{
                            if(item.isSelect){
                                lastAnswer.push(this.optionList[index])
                            }
                        }
                        if(index<this.answer.length-1){
                            options+=item.itemDetails+"&&"
                        }else{
                            options+=item.itemDetails
                        }
                    })
                }else{
                    options="正确&&错误"
                }
                this.$emit('submitQuestion',this.question,options,type,lastAnswer)
            }
        },
        // 检测是否可以提交
        isSubmit(type){
            let isOptionNull=true
            let isAnswer=false
            let num=0
            if(type==1||type==0){
                this.answer.forEach(item=>{
                    if(!item.itemDetails){
                        isOptionNull=false
                    }
                    if(item.isSelect){
                        isAnswer=true
                        num++
                    }
                })
            }
            if(type==0){
                if(!this.question.stem){
                    this.$message.error('题干不能为空')
                    return false
                }else if(!isAnswer){
                    this.$message.error('答案不能为空')
                    return false
                }else if(!isOptionNull){
                    this.$message.error('选项不能为空')
                    return false
                }else{
                    return true
                }
            }else if(type==1){
                if(!this.question.stem){
                    this.$message.error('题干不能为空')
                    return false
                }else if(!isAnswer){
                    this.$message.error('答案不能为空')
                    return false
                }else if(!isOptionNull){
                    this.$message.error('选项不能为空')
                    return false
                }else if(num<2){
                    this.$message.error('答案不能为空且答案不能低于两个')
                    return false
                }else{
                    return true
                }
            }else if(type==2){
                if(!this.question.stem){
                    this.$message.error('题干不能为空')
                    return false
                }else if(typeof this.answer != 'string'){
                    this.$message.error('答案不能为空')
                    return false
                }else{
                    return true
                }
            }else if(type==3){
                if(!this.question.stem){
                    this.$message.error('题干不能为空')
                    return false
                }else if(!this.question.analyse){
                    this.$message.error('解析不能为空')
                    return false
                }else{
                    return true
                }
            }
        },
    }
}
</script>
<style lang="stylus" scoped>
    .question
        display:flex;align-items: stretch;
        button 
            width:15%
            background:#eee
            border:1px solid #ccc

        .details
            width:85%
            border-left:0
            border-bottom-left-radius :0
            border-top-left-radius :0
            border-color:#ccc

    .analysis
        margin-top:10px;
</style>